<template>
  <view>
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <view
        v-show="show"
        ref="fabBtn"
        class=" cqc-btn copy-row-btn "
        :style="{
          '$fWidth': '45px'
        }"
      >
        <view class="btn-content " @click="btnClick">复制行</view>
      </view>
    </transition>
  </view>
</template>

<script>
export default {
  name: 'FabBtn',

  props: {
    show: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      fWidth: 45
    };
  },

  mounted() {
    const style = this.$refs.fabBtn.$el.style;
    style.setProperty('--fWidth', this.fWidth + 'px');
  },

  methods: {
    btnClick() {
      const btn = this.$refs.fabBtn;
      const el = btn.$el;
      const body = document.body;
      const { left, width } = el.getBoundingClientRect();
      const { width: bWidth } = body.getBoundingClientRect();
      const flag = bWidth - width + this.fWidth;

      if (left < flag) {
        this.$emit('btnClick');
      }
    }
  }
};
</script>
